<template>
  <div class="warp">
    <!-- <div class="hade"></div> -->
    <div class="body dfsp">
      <div class="bodyL" :style="{ width: langteL }">
        <div class="title">{{ t('mine') }}</div>
        <div class="item user" @click="TapType(1)">
          <div class="user_hd">
            <div style="position: relative; width: 60px; height: 60px; margin: 0 auto">
              <el-upload :http-request="upLogon" :show-file-list="false">
                <div
                  class="EditPen"
                  style="position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%)"
                >
                  <el-icon><EditPen /></el-icon>
                </div>
                <img v-if="userInfo.auth" class="user_logo" :src="userInfo.auth.img_url" alt="" />
                <img v-else class="user_logo" src="@/style/img/icon_user.png" alt="" />
              </el-upload>
            </div>
            <p style="padding-top: 10px">{{ userInfo.user_name }}</p>
          </div>
          <div class="user_bd">
            <p>
              <text>{{ t('phone') }}</text>
            </p>
            <p class="mobile">{{ userInfo.mobile }}</p>
          </div>
        </div>
        <div class="menu">
          <div class="item" @click="TapType(2)">
            <div class="item-right">
              <el-icon>
                <Lock />
              </el-icon>
              <text class="name" :style="{ width: langtex }">{{ t('Changeloginpassword') }}</text>
            </div>
            <div>
              <img src="../../style/img/mine/right.png" alt="" height="20" />
            </div>
          </div>
          <div class="item" @click="TapType(3)">
            <div class="item-right">
              <el-icon>
                <Lock />
              </el-icon>
              <text class="name" :style="{ width: langtex }">
                {{ t('Changetransactionpassword') }}
              </text>
            </div>
            <div>
              <img src="../../style/img/mine/right.png" alt="" height="20" />
            </div>
          </div>
          <div class="item" @click="TapType(4)">
            <div class="item-right">
              <el-icon>
                <Postcard />
              </el-icon>
              <text class="name" :style="{ width: langtex }">{{ t('nameauth') }}</text>
            </div>
            <div>
              <img src="../../style/img/mine/right.png" alt="" height="20" />
            </div>
          </div>
          <div class="item btn" @click="TapType(5)">
            <div class="item-right">
              <el-icon>
                <OfficeBuilding />
              </el-icon>
              <text class="name" :style="{ width: langtex }">{{ t('bankaccount') }}</text>
            </div>
            <div>
              <img src="../../style/img/mine/right.png" alt="" height="20" />
            </div>
          </div>
        </div>
      </div>
      <div class="bodyR" style="background-color: transparent" v-show="indexType == 1">
        <!-- <img class="minebg" src="@/style/img/mine1.png" alt="" /> -->
      </div>
      <div class="bodyR" v-show="indexType != 1" style="padding: 0">
        <transition name="el-fade-in-linear">
          <modifyLoginPsw v-show="indexType == 2"></modifyLoginPsw>
        </transition>

        <transition name="el-fade-in-linear">
          <modifyPayPsw v-show="indexType == 3"></modifyPayPsw>
        </transition>

        <transition name="el-zoom-in-center">
          <authentication v-show="indexType == 4"></authentication>
        </transition>

        <transition name="el-zoom-in-center">
          <bankCard v-show="indexType == 5"></bankCard>
        </transition>
      </div>
    </div>
  </div>
</template>

<script setup>
import Cookies from 'js-cookie'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { useStore } from 'vuex'
const store = useStore() //vuex
import modifyLoginPsw from './component/modifyLoginPsw.vue'
import modifyPayPsw from './component/modifyPayPsw.vue'
import authentication from './component/authentication.vue'
import bankCard from './component/bankCard.vue'
import { Lock, Postcard, OfficeBuilding, EditPen } from '@element-plus/icons-vue'
import { ref, onMounted, getCurrentInstance, computed } from 'vue'
import { pathToBase64 } from '@/common/Base64.js'
const langteL = computed(() => {
  let width = ''
  if (Cookies.get('Lang') == 'nogu') {
    width = '24%'
  } else {
    width = '20'
  }
  return width
})
const langtex = computed(() => {
  let width = ''
  if (Cookies.get('Lang') == 'nogu') {
    width = '380px'
  } else {
    width = '120px'
  }
  return width
})
const imageloading = ref(false)
const indexType = ref(1)
const menuList = ref([
  {
    index: 2,
  },
])
const TapType = (type) => {
  indexType.value = type
}
const imageUrl = ref('')
const upLogon = (data) => {
  pathToBase64(URL.createObjectURL(data.file)).then((res) => {
    imageUrl.value = res
    base64upload()
  })
}
// 上传
const base64upload = (type) => {
  imageloading.value = true
  proxy
    .$post('/mt4/Member/base64upload', {
      file: imageUrl.value,
    })
    .then((res) => {
      uplogo(res.data)
      imageloading.value = false
    })
    .catch((res) => {
      imageloading.value = false
    })
}
// 用户头像
const uplogo = (logo) => {
  if (userInfo.value.auth.isauth == undefined || userInfo.value.auth.isauth == null) {
    ElMessage.error(t('pleaseauthenticatename'))
    return
  }
  proxy
    .$post('/mt4/Member/update_avatar', {
      img: logo,
    })
    .then((res) => {
      GetUser()
    })
    .catch((res) => {})
}

//
const { proxy } = getCurrentInstance()
onMounted(() => {
  GetUser()
})
const userInfo = ref({})
const GetUser = () => {
  proxy
    .$post('/mt4/Member/index', {})
    .then((res) => {
      userInfo.value = res.data
      store.state.userInfo = res.data
    })
    .catch((res) => {})
}
</script>

<style lang="scss" scoped>
@import '../../style/scss/mine';
</style>
